"use cilent";
import { listQuestionBankVoByPageUsingPost } from "@/api/questionBankController";
import {
  addQuestionBankQuestionUsingPost,
  listQuestionBankQuestionVoByPageUsingPost,
  removeQuestionBankQuestionUsingPost,
} from "@/api/questionBankQuestionController";
import { Form, message, Modal, Select } from "antd";
import React, { useEffect, useState } from "react";

interface Props {
  isModalOpen: boolean;
  questionId?: number;
  onCancel?: () => void;
}
/**
 * 更新所属题库弹窗
 * @returns
 */
const UpdateBankModal: React.FC<Props> = (props: Props) => {
  const { isModalOpen, questionId, onCancel } = props;
  if (!questionId) {
    // initValues.tags = JSON.parse(questionId.tags) || [];
  }
  //   获取antd From组件节点
  const [form] = Form.useForm();
  //  获取题库列表
  const getQuestionBankList = async () => {
    try {
      const res = await listQuestionBankQuestionVoByPageUsingPost({
        questionId,
        pageSize: 20,
      });
      const list = (res.data?.records ?? []).map((item) => item.questionBankId);
      form.setFieldValue("questionBankIdList", list);
    } catch (error: any) {
      message.error("获取题库列表失败" + error.message);
    }
  };
  useEffect(() => {
    if (questionId) {
      getQuestionBankList();
    }
  }, [questionId]);

  const [bankList, setBankList] = useState<API.QuestionBankVO[]>([]);
  // 获取题库列表
  const getQuestionBank = async () => {
    try {
      const res = await listQuestionBankVoByPageUsingPost({
        pageSize: 200,
        sortField: "createTime",
        sortOrder: "descend",
      });
      setBankList(res.data?.records ?? []);
    } catch (error: any) {
      message.error("获取题库失败" + error.message);
    }
  };
  useEffect(() => {
    getQuestionBank();
  }, []);

  const options = bankList.map((item) => {
    return {
      label: item.title,
      value: item.id,
    };
  });
  const handleChange = async (value: string[]) => {
    console.log(`selected ${value}`);
  };
  return (
    <>
      <Modal
        title="修改"
        open={isModalOpen}
        onCancel={() => onCancel?.()}
        centered={true}
        footer={null}
      >
        <Form form={form} style={{ marginTop: 24 }}>
          <Form.Item label="所属题库" name="questionBankIdList">
            <Select
              mode="multiple"
              allowClear
              style={{ width: "100%" }}
              placeholder="请选择题库"
              options={options}
              onCancel={() => onCancel?.()}
              onSelect={async (value) => {
                const hide = message.loading("正在修改...");
                try {
                  await addQuestionBankQuestionUsingPost({
                    questionId,
                    questionBankId: value,
                  });
                  hide();
                  message.success("修改成功");
                } catch (error: any) {
                  hide();
                  message.error("修改失败", error.message);
                }
              }}
              onDeselect={async (value) => {
                const hide = message.loading("正在修改...");
                try {
                  await removeQuestionBankQuestionUsingPost({
                    questionId,
                    questionBankId: value,
                  });
                  hide();
                  message.success("修改成功");
                } catch (error: any) {
                  hide();
                  message.error("修改失败", error.message);
                }
              }}
            />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};
export default UpdateBankModal;
